<template>
  <div class="detail-container">
    <div class="top-wrapper">
      <div class="org-detail">
        <div class="avatar">
          <el-avatar style="background-color:#1e90ff" shape="square" :size="50">张</el-avatar>
        </div>
        <div class="org-info">
          <div class="i-top">
            <div class="t-left">
              <span class="title">{{detail.test1}}</span>
              <el-tag effect="plain" class="tagItem" size="small" type="info">{{detail.test2}}</el-tag>
            </div>
            <div class="t-right">
              <el-tag class="tagItem" size="small" type="danger">{{detail.test3}}</el-tag>
            </div>
          </div>
          <div class="info-detail label-color">
            <div>年龄：{{detail.test4}}</div>
            <div>身份证号：{{detail.test5}}</div>
            <div>电话号码：{{detail.test6}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-wrapper">
      <div class="tabs-list">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="活动轨迹" name="track">
            <Track />
          </el-tab-pane>
          <el-tab-pane label="预警信息" name="forewarningMsg">
            <ForewarningMsg />
          </el-tab-pane>
          <el-tab-pane label="健康申报" name="declare">
            <HealthyDeclare />
          </el-tab-pane>
          <el-tab-pane label="扫码日志" name="log">
            <CodeLog />
          </el-tab-pane>
          <el-tab-pane label="防控信息" name="fkMsg">
            <FKMsg />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import CodeLog from '@/components/fk/codeForewarning/CodeLog.vue';
import FKMsg from '@/components/fk/codeForewarning/FKMsg.vue';
import ForewarningMsg from '@/components/fk/codeForewarning/ForewarningMsg.vue';
import HealthyDeclare from '@/components/fk/codeForewarning/HealthyDeclare.vue';
import Track from '@/components/fk/codeForewarning/Track.vue';
export default {
  name: 'CodeForewarningDetail',
  components: {CodeLog, FKMsg, ForewarningMsg, HealthyDeclare , Track},
  data() {
    return {
      detail: {
        id: 0,
        test1: '张真诚', // 名称
        test2: '男', // 性别
        test3: '红色重点人', // 标志
        test4: '22', // 年龄
        test5: '5222xxxxxx3434',  // 身份证号
        test6: '1302320239', // 手机号
        applicantName: '',
        applicantIdCard: '',
        applicantPhone: ''
      },
      activeName: 'track'
    }
  },
  methods:{
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>
<style lang="scss">
.tabs-list{
  .el-tabs__nav-scroll{
    padding-left: 20px;
  }
  .el-tabs__item{
    font-size: 16px;
  }
}
</style>
<style lang="scss" scoped>
.detail-container{
  margin: 10px;
}
.top-wrapper{
  background: #fff;
  padding: 20px;

  .org-detail{
    display:flex;
    display: -webkit-flex;
  }

  .tips{
    display:flex;
    display: -webkit-flex;
    margin-top: 1.2rem;
    align-items: center;
  }
}

.org-info{
  flex: 1;
  margin-left: 1rem;
  
  .i-top{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;

    .title{
      font-weight: 700;
    }
    .tagItem{
      margin-left:1rem;
    }
  }
  .info-detail{
    font-size: 14px;
    display: flex;
    display: -webkit-flex;
    margin-top: 0.4rem;
    div:first-child{
      padding-right: 1rem;
    }
    div:not(:first-child){
      padding: 0 1rem;
      border-left: 1px solid #ced6e0;
    }
  }
}

.bottom-wrapper{
  margin-top: 1rem;
  background-color: #fff;
  padding-top: 1rem;

  .tabs-list{
    flex: 1;
    background: #fff;
  }
}

</style>